Framer Motion — Drag Events and MotionValues

With the Framer Motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with Framer Motion.

Drag Events

We can listen for drag events with the onDrag , onDragStart , onDragEnd , onDirectionLock events.

For example, we can write:

import { motion } from "framer-motion";
import React from "react";

export default function App() {
  return (
    <>
      <motion.div
        style={{ backgroundColor: "red", width: 100, height: 100 }}
        drag="x"
        onDrag={(event, info) => console.log(info.point.x, info.point.y)}
        onDragStart={(event, info) => console.log(info.point.x, info.point.y)}
        onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}
      />
    </>
  );
}

to let us listen to the drag events.

info.point.x and info.point.y have the x and y coordinates of the drag position.

We can also add the onDirectionLock event to listen for drag direction locks.

For example, we can write:

import { motion } from "framer-motion";
import React from "react";

export default function App() {
  return (
    <>
      <motion.div
        style={{ backgroundColor: "red", width: 100, height: 100 }}
        drag="x"
        dragDirectionLock
        onDirectionLock={(axis) => console.log(axis)}
        onDrag={(event, info) => console.log(info.point.x, info.point.y)}
        onDragStart={(event, info) => console.log(info.point.x, info.point.y)}
        onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}
      />
    </>
  );
}

We set the dragDirectionLock prop to true and the drag prop to 'x' , so the axis parameter will be set to 'x' .

MotionValue

MotionValues track the state and velocity of animating values.

We can create MotionValues manually to set and get their state, pass multiple components to synchronize motion across components, chain MotionValues with the useTransform hook, and update visual properties without re-rendering.

For example, we can use them to change the opacity of a div when we drag it by writing:

import { motion, useMotionValue, useTransform } from "framer-motion";
import React from "react";

const input = [-200, 0, 200];
const output = [0, 1, 0];

export default function App() {
  const x = useMotionValue(0);
  const opacity = useTransform(x, input, output);

  return (
    <motion.div
      drag="x"
      style={{ x, opacity, backgroundColor: "red", width: 100, height: 100 }}
    />
  );
}

The useMotionValue hook is used to create the MotionValue.

Then we use the useTransform value to map the x value to the input and output .

The input array has the position range in an array.

The output array has the opacity range.

So the position is changed when we drag, and that returns the opacity of the div.

We can get and set MotionValues.

The set method sets the MotionValue.

And the get and getVelocity methods gets the position and velocity respectively.

For example, we can write:

import { motion, useMotionValue, useTransform } from "framer-motion";
import React, { useEffect } from "react";

const input = [-200, 0, 200];
const output = [0, 1, 0];

export default function App() {
  const x = useMotionValue(0);
  const opacity = useTransform(x, input, output);

  useEffect(() => {
    x.set(100);
  }, []);

  useEffect(() => {
    console.log(x.get());
    console.log(x.getVelocity());
  }, [x]);

  return (
    <motion.div
      drag="x"
      style={{ x, opacity, backgroundColor: "red", width: 100, height: 100 }}
    />
  );
}

to set the position with set and get the position and velocity with get and getVelocity .

Conclusion

We can get and set MotionValue values and handle drag events with Framer Motion.